<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle" style="display: flex;">
        <!-- 搜索 -->
        <label class="el-form-item-label">对应的任务id</label>
        <el-input v-model.trim="query.taskCode" clearable placeholder="对应的任务id" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <!-- <label class="el-form-item-label">机器type</label>
        <el-input v-model="query.robotType" clearable placeholder="机器type" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <label class="el-form-item-label">机器code</label>
        <el-input v-model="query.robotCode" clearable placeholder="机器code" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" /> -->
        <label class="el-form-item-label">台车id</label>
        <el-input v-model.trim="query.containerId" clearable placeholder="台车id" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <label class="el-form-item-label">创建时间</label>
        <el-date-picker
          v-model="query.createTime"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          class="filter-item"
          value-format="yyyy-MM-dd HH:mm:ss"
        />
        <rrOperation :crud="crud" />
      </div>
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation :permission="permission" :plain="true" />
      <!--表单组件-->
      <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="500px">
        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="120px">
          <el-form-item label="状态">
            <el-input v-model="form.status" style="width: 250px;" />
          </el-form-item>
          <el-form-item label="开始时间">
            <el-input v-model="form.createTime" style="width: 250px;" />
          </el-form-item>
          <el-form-item label="完成时间">
            <el-input v-model="form.finishTime" style="width: 250px;" />
          </el-form-item>
          <el-form-item label="创建人">
            <el-input v-model="form.createBy" style="width: 250px;" />
          </el-form-item>
          <el-form-item label="更新人">
            <el-input v-model="form.updateBy" style="width: 250px;" />
          </el-form-item>
          <el-form-item label="更新时间">
            <el-input v-model="form.updateTime" style="width: 250px;" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="crud.cancelCU">取消</el-button>
          <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
        </div>
      </el-dialog>
      <!--表格渲染-->
      <el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
        <!-- <el-table-column type="selection" width="55" /> -->
        <el-table-column prop="taskCode" label="对应的任务id" />
        <!-- <el-table-column prop="robotType" label="机器type" />
        <el-table-column prop="robotCode" label="机器code" /> -->
        <el-table-column prop="fromStorageId" label="开始储位id" />
        <el-table-column prop="toStorageId" label="结束储位" />
        <!-- <el-table-column prop="theSecondStorageId" label="第二结束储位" /> -->
        <el-table-column prop="containerId" label="台车Id" />
        <el-table-column prop="materialJson" label="物料json">
          <template slot-scope="scope">
            <el-button type="text" :disabled="!scope.row.materialJson" @click="checkDetail(scope.row.materialJson)">查看详情</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            {{ dict.label.mission_status[scope.row.status] }}
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="开始时间" />
        <el-table-column prop="finishTime" label="完成时间" />
        <!-- <el-table-column prop="createBy" label="创建人" />
        <el-table-column prop="updateBy" label="更新人" />
        <el-table-column prop="updateTime" label="更新时间" /> -->
        <!-- <el-table-column v-if="checkPer(['admin','wcsTask:edit','wcsTask:del'])" label="操作" width="100px" align="center">
          <template slot-scope="scope">
            <udOperation
              :data="scope.row"
              :permission="permission"
            />
          </template>
        </el-table-column> -->
      </el-table>
      <!--分页组件-->
      <pagination />
      <!-- 嵌套表格dialog -->
      <el-dialog title="对应物料数据" :visible.sync="dialogVisible" width="50%" @close="closeMessage">
        <el-table border :data="materialDetail">
          <el-table-column property="jsonData" label="json" align="center" />
          <!-- <el-table-column property="id" label="id" align="center" />
          <el-table-column property="containerCode" label="容器编码" align="center" /> -->
          <!-- <el-table-column property="materialCode" label="物料编码" align="center" />
          <el-table-column property="materialName" label="物料名称" align="center" />
          <el-table-column property="materialBatch" label="物料批次号" align="center" />
          <el-table-column property="materialType" label="物料类型" align="center" />
          <el-table-column property="materialQty" label="数量" align="center" />
          <el-table-column property="createBy" label="创建者" align="center" />
          <el-table-column label="创建时间" align="center" width="160">
            <template slot-scope="scope">
              {{ formatDate(scope.row.createTime, 'zh') }}
            </template>
          </el-table-column>
          <el-table-column label="更新时间" align="center" width="160">
            <template slot-scope="scope">
              {{ formatDate(scope.row.updateTime, 'zh') }}
            </template>
          </el-table-column> -->
        </el-table>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import '@/utils/datetime'
import crudWcsTask from '@/api/work/mission'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
// import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'

const defaultForm = { id: null, taskCode: null, robotType: null, robotCode: null, fromStorageId: null, toStorageId: null, theSecondStorageId: null, containerId: null, materialJson: null, status: null, createTime: null, finishTime: null, createBy: null, updateBy: null, updateTime: null }
export default {
  name: 'Mission',
  components: { pagination, rrOperation, crudOperation },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  dicts: ['mission_status'],
  cruds() {
    return CRUD({ title: 'WcsTaskController', url: 'api/wcsTask', idField: 'id', sort: 'id,desc', crudMethod: { ...crudWcsTask },
      optShow: {
        reset: true,
        download: true,
        add: false,
        edit: false,
        del: false
      }
    })
  },
  data() {
    return {
      permission: {
        add: ['admin', 'wcsTask:add'],
        edit: ['wcsTask:edit'],
        del: ['admin', 'wcsTask:del']
      },
      rules: {
      },
      queryTypeOptions: [
        { key: 'taskCode', display_name: '对应的任务id' },
        { key: 'robotType', display_name: '机器type' },
        { key: 'robotCode', display_name: '机器code' },
        { key: 'toStorageId', display_name: '结束储位' }
      ],
      dialogVisible: false,
      materialDetail: []
    }
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      return true
    },
    formatDate(dateString, locale) {
      const date = new Date(dateString)
      return date.strftime('%Y-%m-%d %H:%M:%S', locale)
    },
    checkDetail(row) {
      this.dialogVisible = true
      // const jsonData = JSON.parse(row)
      // this.materialDetail = jsonData
      // 将row转化为对象数组
      const jsonData = JSON.parse(row)
      for (let i = 0; i < jsonData.length; i++) {
        // console.log(i)
        jsonData[i].jsonData = JSON.stringify(jsonData[i])
      }
      // console.log(jsonData)
      this.materialDetail = jsonData
    },
    closeMessage() {
      this.dialogVisible = false
      this.materialDetail = []
    }
  }
}
</script>

<style scoped>

</style>
